import React,{useRef,useEffect} from 'react'
import * as echarts from 'echarts';

type Props = {}

const Nav = (props: Props) => {
  const my_line:any=useRef()
  
  useEffect(()=>{
  // console.log(my_line.current);
  const myChart = echarts.init(my_line.current);
  myChart.setOption( {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line',
        lineStyle: {
          color: 'rgba(0,0,0,0.2)',
          width: 1,
          type: 'solid'
        }
      }
    },
    legend: {
      data: ['DQ', 'TY', 'SS', 'QG', 'SY', 'DD']
    },
    singleAxis: {
      top: 50,
      bottom: 50,
      axisTick: {},
      axisLabel: {},
      type: 'time',
      axisPointer: {
        animation: true,
        label: {
          show: true
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          opacity: 0.2
        }
      }
    },
    series: [
      {
        type: 'themeRiver',
        emphasis: {
          itemStyle: {
            shadowBlur: 20,
            shadowColor: 'rgba(0, 0, 0, 0.8)'
          }
        },
        data: [
          ['2015/11/08', 10, 'DQ'],
          ['2015/11/09', 15, 'DQ'],
          ['2015/11/10', 35, 'DQ'],
          ['2015/11/11', 38, 'DQ'],
          ['2015/11/12', 22, 'DQ'],
          ['2015/11/13', 16, 'DQ'],
          ['2015/11/14', 7, 'DQ'],
          ['2015/11/15', 2, 'DQ'],
          ['2015/11/16', 17, 'DQ'],
          ['2015/11/17', 33, 'DQ'],
          ['2015/11/18', 40, 'DQ'],
          ['2015/11/19', 32, 'DQ'],
          ['2015/11/20', 26, 'DQ'],
          ['2015/11/21', 35, 'DQ'],
          ['2015/11/22', 40, 'DQ'],
          ['2015/11/23', 32, 'DQ'],
          ['2015/11/24', 26, 'DQ'],
          ['2015/11/25', 22, 'DQ'],
          ['2015/11/26', 16, 'DQ'],
          ['2015/11/27', 22, 'DQ'],
          ['2015/11/28', 10, 'DQ'],
          ['2015/11/08', 35, 'TY'],
          ['2015/11/09', 36, 'TY'],
          ['2015/11/10', 37, 'TY'],
          ['2015/11/11', 22, 'TY'],
          ['2015/11/12', 24, 'TY'],
          ['2015/11/13', 26, 'TY'],
          ['2015/11/14', 34, 'TY'],
          ['2015/11/15', 21, 'TY'],
          ['2015/11/16', 18, 'TY'],
          ['2015/11/17', 45, 'TY'],
          ['2015/11/18', 32, 'TY'],
          ['2015/11/19', 35, 'TY'],
          ['2015/11/20', 30, 'TY'],
          ['2015/11/21', 28, 'TY'],
          ['2015/11/22', 27, 'TY'],
          ['2015/11/23', 26, 'TY'],
          ['2015/11/24', 15, 'TY'],
          ['2015/11/25', 30, 'TY'],
          ['2015/11/26', 35, 'TY'],
          ['2015/11/27', 42, 'TY'],
          ['2015/11/28', 42, 'TY'],
          ['2015/11/08', 21, 'SS'],
          ['2015/11/09', 25, 'SS'],
          ['2015/11/10', 27, 'SS'],
          ['2015/11/11', 23, 'SS'],
          ['2015/11/12', 24, 'SS'],
          ['2015/11/13', 21, 'SS'],
          ['2015/11/14', 35, 'SS'],
          ['2015/11/15', 39, 'SS'],
          ['2015/11/16', 40, 'SS'],
          ['2015/11/17', 36, 'SS'],
          ['2015/11/18', 33, 'SS'],
          ['2015/11/19', 43, 'SS'],
          ['2015/11/20', 40, 'SS'],
          ['2015/11/21', 34, 'SS'],
          ['2015/11/22', 28, 'SS'],
          ['2015/11/23', 26, 'SS'],
          ['2015/11/24', 37, 'SS'],
          ['2015/11/25', 41, 'SS'],
          ['2015/11/26', 46, 'SS'],
          ['2015/11/27', 47, 'SS'],
          ['2015/11/28', 41, 'SS'],
          ['2015/11/08', 10, 'QG'],
          ['2015/11/09', 15, 'QG'],
          ['2015/11/10', 35, 'QG'],
          ['2015/11/11', 38, 'QG'],
          ['2015/11/12', 22, 'QG'],
          ['2015/11/13', 16, 'QG'],
          ['2015/11/14', 7, 'QG'],
          ['2015/11/15', 2, 'QG'],
          ['2015/11/16', 17, 'QG'],
          ['2015/11/17', 33, 'QG'],
          ['2015/11/18', 40, 'QG'],
          ['2015/11/19', 32, 'QG'],
          ['2015/11/20', 26, 'QG'],
          ['2015/11/21', 35, 'QG'],
          ['2015/11/22', 40, 'QG'],
          ['2015/11/23', 32, 'QG'],
          ['2015/11/24', 26, 'QG'],
          ['2015/11/25', 22, 'QG'],
          ['2015/11/26', 16, 'QG'],
          ['2015/11/27', 22, 'QG'],
          ['2015/11/28', 10, 'QG'],
          ['2015/11/08', 10, 'SY'],
          ['2015/11/09', 15, 'SY'],
          ['2015/11/10', 35, 'SY'],
          ['2015/11/11', 38, 'SY'],
          ['2015/11/12', 22, 'SY'],
          ['2015/11/13', 16, 'SY'],
          ['2015/11/14', 7, 'SY'],
          ['2015/11/15', 2, 'SY'],
          ['2015/11/16', 17, 'SY'],
          ['2015/11/17', 33, 'SY'],
          ['2015/11/18', 40, 'SY'],
          ['2015/11/19', 32, 'SY'],
          ['2015/11/20', 26, 'SY'],
          ['2015/11/21', 35, 'SY'],
          ['2015/11/22', 4, 'SY'],
          ['2015/11/23', 32, 'SY'],
          ['2015/11/24', 26, 'SY'],
          ['2015/11/25', 22, 'SY'],
          ['2015/11/26', 16, 'SY'],
          ['2015/11/27', 22, 'SY'],
          ['2015/11/28', 10, 'SY'],
          ['2015/11/08', 10, 'DD'],
          ['2015/11/09', 15, 'DD'],
          ['2015/11/10', 35, 'DD'],
          ['2015/11/11', 38, 'DD'],
          ['2015/11/12', 22, 'DD'],
          ['2015/11/13', 16, 'DD'],
          ['2015/11/14', 7, 'DD'],
          ['2015/11/15', 2, 'DD'],
          ['2015/11/16', 17, 'DD'],
          ['2015/11/17', 33, 'DD'],
          ['2015/11/18', 4, 'DD'],
          ['2015/11/19', 32, 'DD'],
          ['2015/11/20', 26, 'DD'],
          ['2015/11/21', 35, 'DD'],
          ['2015/11/22', 40, 'DD'],
          ['2015/11/23', 32, 'DD'],
          ['2015/11/24', 26, 'DD'],
          ['2015/11/25', 22, 'DD'],
          ['2015/11/26', 16, 'DD'],
          ['2015/11/27', 22, 'DD'],
          ['2015/11/28', 10, 'DD']
        ]
      }
    ]
  });
  return ()=>{
    myChart.dispose()
  }
  },[])
  return (
    <div>
      <div ref={my_line} style={{width:"375px",height:"400px"}}>

      </div>
    </div>
  )
}

export default Nav